<template>
  <div class="auto-scroll-table-container">
    <div class="table-wrapper">
      <table class="scroll-table">
        <thead>
          <tr>
            <th v-for="(header, index) in config.header" :key="index">
              {{ header }}
            </th>
          </tr>
        </thead>
      </table>
      <vue-seamless-scroll
        :data="config.data"
        :class-option="scrollOption"
        class="seamless-scroll"
      >
        <table class="scroll-table">
          <tbody>
            <tr v-for="(row, rowIndex) in config.data" :key="rowIndex">
              <td v-for="(cell, cellIndex) in row" :key="cellIndex">
                {{ cell }}
              </td>
            </tr>
          </tbody>
        </table>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import VueSeamlessScroll from 'vue-seamless-scroll'

const props = defineProps({
  config: {
    type: Object,
    required: true,
    default: () => ({
      header: [],
      data: [],
      rowNum: 5,
      scrollSpeed: 50 // 滚动速度，数值越小越快
    })
  }
})

// 滚动配置
const scrollOption = computed(() => {
  const speed = props.config.scrollSpeed || 50
  return {
    step: 1, // 步长
    limitMoveNum: props.config.rowNum || 5, // 开始滚动的数据量
    hoverStop: true, // 鼠标悬停停止
    direction: 1, // 0向下 1向上
    openWatch: true, // 开启数据监听
    singleHeight: 42, // 单步高度
    waitTime: speed, // 等待时间
    switchOffset: 0,
    autoPlay: true
  }
})
</script>

<style scoped>
.auto-scroll-table-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.table-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(0, 100, 255, 0.1), rgba(0, 50, 150, 0.05));
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.2);
  position: relative;
  display: flex;
  flex-direction: column;
}

.table-wrapper::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00ffff, #0080ff, #8000ff, #ff00ff);
  border-radius: 10px;
  z-index: -1;
  opacity: 0.3;
  animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
  from { opacity: 0.3; }
  to { opacity: 0.6; }
}

.scroll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  color: #e6f7ff;
  table-layout: fixed; /* 固定表格布局 */
}

.scroll-table thead {
  background: linear-gradient(135deg, rgba(0, 100, 255, 0.2), rgba(0, 50, 150, 0.15));
  display: table; /* 确保表头正确显示 */
  width: 100%;
  table-layout: fixed;
}

.scroll-table th {
  padding: 12px 8px;
  text-align: center;
  font-weight: bold;
  color: #00ffff;
  border-bottom: 2px solid rgba(0, 255, 255, 0.5);
  text-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
}

.scroll-table tbody {
  display: table; /* 确保tbody正确显示 */
  width: 100%;
  table-layout: fixed;
}

.scroll-table td {
  padding: 10px 8px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 150, 255, 0.2);
  height: 42px; /* 确保每行高度一致 */
}

.scroll-table tr:nth-child(even) {
  background: rgba(0, 100, 255, 0.05);
}

.scroll-table tr:nth-child(odd) {
  background: rgba(0, 50, 150, 0.05);
}

.scroll-table tr:hover {
  background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(0, 150, 255, 0.1));
  transform: scale(1.02);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

.seamless-scroll {
  flex: 1;
  overflow: hidden;
  height: calc(100% - 50px); /* 减去表头高度 */
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.5);
  }
}

.scroll-table {
  animation: pulse 4s ease-in-out infinite;
}
</style>